<template>
	<app-layout>
		<view class="box">
			<view class="item">
				<view class="card-info">
					<image class="card-img" :src='detail.pic_url'></image>
					<view class="card-name t-omit-two">{{detail.coupon.name}}</view>
					<view class='card-other'>
						<view class='other-label'>有效时间</view>
						<view>自领取日起{{detail.coupon.expire_day}}天有效</view>
						<view class='other-label'>发放时间</view>
						<view>{{detail.created_at}}</view>
						<view class='other-label'>使用说明</view>
						<text>仅支持{{detail.coupon.name}}</text>
					</view>
				</view>
				<!-- <view class='order-info'>
					<view style="margin-bottom: 24rpx;">核销信息</view>
					<view class='dir-left-nowrap'>
						<view class='info-label'>剩余次数：</view>
						<view>
							<view>{{detail.number - detail.use_number}}次</view>
						</view>
					</view>
					<view class='dir-left-nowrap'>
						<view class='info-label'>已核销次数：</view>
						<view>
							<view>{{detail.use_number}}次</view>
						</view>
					</view>
					<view class='dir-left-nowrap'>
						<view class='info-label'>总次数：</view>
						<view>
							<view>{{detail.number}}次</view>
						</view>
					</view>
				</view> -->
			</view>
			<view class='bottom cross-center'>
				<view @click='cleck' v-if="detail.status == 0">
					<button class="submit-btn">核销抵用券</button>
				</view>
				<view v-if="detail.status == 1">
					<button class="submit-btn graty">此抵用券已使用</button>
				</view>
				<view v-if="detail.status == 2">
					<button class="submit-btn graty">此抵用券已过期</button>
				</view>
			</view>
		</view>
		<!-- <view v-if="msg || submit" class='bg cross-center main-center' @touchmove.stop.prevent="">
			<view class='dialog'>
				<view class="title">{{submit ? '输入本次核销次数' : '提示'}}</view>
				<view v-if="msg" class='dialog-content'>{{msg}}</view>
				<view v-if="submit" class='dialog-content'>
					<input v-model="useNumber" class="input-number" type="number" />次
				</view>
				<view v-if="msg" @click='closeDialog' class='dialog-btn'>确认</view>
				<view v-if="submit" class='dialog-btn main-center cross-center'>
					<view @click='submit=false' style='color:#666666;width: 50%'>取消</view>
					<view class="line"></view>
					<view style='width: 50%' @click='clerk'>确定</view>
				</view>
			</view>
		</view> -->
		<view v-if="ismsg" class='bg cross-center main-center'>
			<view class='dialog'>
				<view>提示</view>
				<view class='dialog-content'>无核销权限</view>
				<view @click='toIndex' class='dialog-btn'>确认</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				vouid: 0,
				detail: {
					start_time: '',
					end_time: ''
				},
				msg: null,
				ismsg: false,
				is_clerk: 0,
				submit: false,
				cardId: null,
				surplus_number: 0,
				useNumber: '',
				qrCodeId: -1,
				pscene: null
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
			// ...mapGetters('user', {
			// 	info: 'info'
			// }),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			}),
		},
		onLoad(options) {
			// console.log(this.info);
			// console.log(options);
			/* if (options.qr_code_id) {
				this.qrCodeId = options.qr_code_id;
			} */
			if (options.scene) {
				let params = decodeURIComponent(options.scene)
				// console.log(params);
				this.pscene = this.$utils.urlParamsToObject(params)
			}
			/* else if(options.id){
				
			} */


			uni.login({
				success: (loginRes) => {
					this.alogin(loginRes)
				}
			})
			// this.IsClerk(pscene.id, pscene.uid);
		},
		name: "clerk",
		methods: {
			async alogin(loginRes) {
				let self = this
				const response = await self.$request({
					url: this.$api.passport.login,
					method: 'post',
					data: {
						code: loginRes.code
					},
				})
				if (response.code == 0) {
					uni.setStorageSync('_USER_ACCESS_TOKEN', response.data
						.access_token)
					this.getInfo()
					if (this.useridres && this.useridres != 0 && this.targoodsid && this.targoodsid != 0) {
						// this.assist()
					}
				}
			},
			async getInfo() {
				let self = this
				const res = await self.$request({
					url: self.$api.user.user_info,
					method: 'get',
				})
				if (res.code == 0) {
					self.IsClerk(self.pscene.id, self.pscene.uid, res.data.options.user_id)
				}
			},
			cleck() {
				let self = this;
				uni.showModal({
					content: '是否核销抵用券？',
					success: function(res) {
						if (res.confirm) {
							self.$showLoading();
							self.$request({
								url: self.$api.voucher.writeoff,
								method: 'post',
								data: {
									id: self.vouid,
								}
							}).then(response => {
								self.$hideLoading();
								uni.showToast({
									title: response.msg,
									icon: 'none',
									duration: 2000,
									success: function() {
										if (response.code === 0) {
											setTimeout(() => {
												uni.redirectTo({
													url: '/plugins/clerk/voucher/voucher'
												})
											}, 2000);
										}
									}
								})
							}).catch(() => {
								self.$hideLoading();
							});
						}
					}
				})
			},
			IsClerk(id, uid, mid) {
				this.$request({
					url: this.$api.user.is_clerk,
					data: {
						clerk_id: mid,
					}
				}).then(response => {
					if (response.code === 0) {
						if (response.data.is_clerk_user == 1) {
							this.getList(id, uid)
						} else {
							this.ismsg = true

							this.$hideLoading();
						}
					}
				}).catch(() => {
					this.$hideLoading();
				});
			},
			toIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			getList(id, uid) {
				let that = this;
				that.$showLoading({
					text: '加载中...'
				});
				that.$request({
					url: that.$api.voucher.list,
					data: {
						id: id,
						user_id: uid
					},
				}).then(response => {
					that.$hideLoading();
					// console.log(response);
					that.detail = response.data.list[0];
					that.vouid = response.data.list[0].id
					/* if (response.code === 0) {
						that.detail = response.data.card;
						that.cardId = id;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000,
						});
					}

					if (that.detail.clerk_number && that.detail.clerk_number >= 1) {
						uni.showModal({
							title: '提示',
							content: '核销码已失效',
							showCancel: false,
							complete: function(res) {
								uni.navigateBack();
							}
						});
					}; */
				}).catch(() => {
					that.$hideLoading();
				});
			},
			clerk() {
				let that = this;
				uni.showLoading({
					title: '核销中...'
				});

				/* if (!that.useNumber) {
					uni.showToast({
						title: '请输入核销次数',
						icon: 'none',
						duration: 2000,
					});
					return false;
				} */

				that.$request({
					url: that.$api.card.clerk,
					data: {
						cardId: that.cardId,
						use_number: that.useNumber,
						qr_code_id: that.qrCodeId,
					},
				}).then(response => {
					uni.hideLoading();
					if (response.code === 0) {
						that.is_clerk = response.data.is_clerk;
						that.msg = response.msg;
						that.submit = false;
						that.surplus_number = response.data.surplus_number;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 2000,
						});
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			closeDialog() {
				if (this.msg) {
					this.msg = ''
					if (this.is_clerk) {
						let url = '';
						if (this.surplus_number > 0) {
							url = '/plugins/clerk/order/order?status=2&type=0';
						} else {
							url = '/plugins/clerk/order/order?status=2&type=1';
						}
						uni.navigateBack({});
					}
				} else {
					this.msg = ''
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.box {
		display: flex;
		flex-direction: column;

		.item {
			margin-bottom: 140#{rpx};
		}
	}

	.card-info {
		margin: 0 24#{rpx};
		border-radius: #{15rpx};
		background-color: #fff;
		position: relative;
		margin-top: #{70rpx};
		text-align: center;
		padding: #{80rpx} #{24rpx} #{36rpx};
		margin-bottom: #{20rpx};
	}

	.card-img {
		height: #{88rpx};
		width: #{88rpx};
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: #{-44rpx};
		border-radius: #{44rpx};
	}

	.card-name {
		font-size: #{46rpx};
		max-width: 70%;
		color: #353535;
		margin: 0 auto #{38rpx};
	}

	.card-status {
		width: #{160rpx};
		height: #{60rpx};
		position: absolute;
		bottom: #{30rpx};
		left: 0;
		right: 0;
		margin: 0 auto;
		line-height: #{60rpx};
		font-size: 15px;
		border-radius: #{30rpx};
		background-color: #FEEEEE;
		color: #FF4544;
	}

	.card-about {
		padding: #{40rpx};
		width: 90%;
		margin: 0 auto #{50rpx};
		border-radius: #{15rpx};
		background-color: #fff;
		font-size: 15px;
	}

	.about-title {
		color: #999999;
		margin-bottom: #{40rpx};
	}

	.submit-btn {
		width: #{702rpx};
		height: #{88rpx};
		margin: 0 auto;
		padding: 0;
		text-align: center;
		line-height: #{88rpx};
		border-radius: #{44rpx};
		background-color: #ff4544;
		color: #fff;
		font-size: #{32rpx};

		&.graty {
			background-color: #999999;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		height: #{140rpx};
		width: 100%;
		padding: 0 #{24rpx};
		border-top: #{1rpx} solid #e2e2e2;
		background: #ffffff;
	}

	.order-info {
		width: #{702rpx};
		margin: #{24rpx};
		background-color: #fff;
		border-radius: #{16rpx};
		padding: #{28rpx} #{24rpx};
		font-size: #{28rpx};
		color: #353535;
	}

	.info-label {
		color: #999999;
	}

	.card-other {
		text-align: left;
		font-size: #{28rpx};
		color: #353535;
		border-top: #{1rpx} solid #e2e2e2;
	}

	.other-label {
		color: #999999;
		margin: #{30rpx} 0 #{22rpx};
	}

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .3);
		z-index: 1000;
	}

	.dialog {
		width: #{630rpx};
		background-color: #fff;
		padding-top: #{40rpx};
		border-radius: #{16rpx};
		font-size: #{32rpx};
		color: #353535;
		text-align: center;

		.title {
			font-size: 32#{rpx};
			color: #353535;
			margin-bottom:40#{rpx};
		}
	}

	.dialog-content {
		margin: #{40rpx};
		display: flex;
		justify-content: center;
		align-items: center;

		.input-number {
			width: 288#{rpx};
			background: #f7f7f7;
			border-radius: 16#{rpx};
			height: 80#{rpx};
			margin-right: 16#{rpx};
			line-height: 80#{rpx};
		}
	}

	.dialog-btn {
		color: #ff4544;
		height: #{88rpx};
		line-height: #{88rpx};
		border-top: #{1rpx} solid #e2e2e2;
	}

	.line {
		height: #{45rpx};
		width:#{1rpx};
		background-color: #e2e2e2;
	}
</style>
